<template>
<!-- 同步任务 -->
<a-card :border='false'>
  <div>
    <my-table-screen
      :queryParam="queryParam"
      :queryOptions="queryOptions"
      :queryData="queryData"
      @handleFilter="handleFilter"
    ></my-table-screen>

    <div>
      <my-table
        ref="mytable"
        :tableData="tableData"
        @tableHandleIn="tableHandleIn"
      ></my-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParam.page"
        :limit.sync="queryParam.page_size"
        @pagination="getList"
      />
    </div>
  </div>

  <a-drawer
    placement="right"
    :closable="false"
    :destroyOnClose="true"
    :maskClosable="true"
    width="70%"
    :visible="is_drawer"
    @close="drawerClose"
  >
    <tack-details v-if="is_drawer" :tack_details="tack_details"></tack-details>
  </a-drawer>

</a-card>
</template>

<script>
import { taskList,taskOpen,taskClose } from "@/api/adv/batch";

export default {
  components:{
    'tackDetails':()=>import('./tackDetails')
  },
  data () {
    return {
      is_drawer:false,
      tack_details:'',
      // 查询
      queryParam:{  // 初始化数据
        task_type:'OCEAN_SYNC',
        page:1,
        page_size:10,
      },
      total: 0,
      queryData:[
        { id:'id',title:'ID',type:'input',placeholder:'ID' },
        { id:'task_status',title:'任务状态',type:'select',placeholder:'请选择状态',options:'oceanTaskStatus' },
        { id:'created_at',title:'创建时间',type:'times' },
      ],
      queryOptions:{
        oceanTaskStatus:this.$global.oceanTaskStatus,
      },
      // 表格
      tableData:{
        rowKey:false,
        rowSelection:false,
        tableDataSource:[],
        tableColumns:[
          { title:'ID',dataIndex:'id',align:'center',fixed:'left',width:120 },
          { title:'任务名称',dataIndex:'name',align:'center',fixed:'left',width:200 },
          { title:'任务状态',dataIndex:'task_status',align:'center',fixed:'left',width:120,scopedSlots: {customRender:'filter'},
            formatter:(row)=>{
              for (const item of this.$global.oceanTaskStatus) {
                if( item.value == row.task_status ) return item.label
              }
            },colorEvent:(row)=>{
              if(row.task_status == 'WAITING'){ return `color:${ this.$global.colorStatus['orange'] }` }
              else if(row.task_status == 'RUNNING'){ return `color:${ this.$global.colorStatus['blue'] }` }
              else if(row.task_status == 'DONE'){ return `color:${ this.$global.colorStatus['green'] }` }
              else if(row.task_status == 'CLOSE'){ return `color:${ this.$global.colorStatus['red'] }` }
            }
          },
          { title:'任务类型',dataIndex:'task_type',align:'center',fixed:'left',width:180,scopedSlots: {customRender:'filter'},
            formatter:(row)=>{
              for (const item of this.$global.oceanTaskType) {
                if( item.value == row.task_type ) return item.label
              }
            }
          },
          { title:'操作用户名称',forname:['admin_user','name'],align:'center',width:150,scopedSlots: {customRender:'cycles'},
            "formatter":function(obj,name){
              return obj !== null ? obj[name] : '【系统】'
            }
          },
          { title:'任务总数',forname:['sub_task_count','total'],align:'center',scopedSlots: {customRender:'cycles'},
            "formatter":function(obj,name){
              return obj[name]
            },width:100
          },
          { title:'执行成功',forname:['sub_task_count','SUCCESS'],align:'center',scopedSlots: {customRender:'cycles'},
            "formatter":function(obj,name){
              return obj[name]
            },width:100
          },
          { title:'执行失败',forname:['sub_task_count','FAIL'],align:'center',scopedSlots: {customRender:'cycles'},
            "formatter":function(obj,name){
              return obj[name]
            },colorEvent:(row)=>{
              if( row.sub_task_count.FAIL > 0) return `color:${ this.$global.colorStatus['red'] }`
            },width:100
          },
          { title:'待执行',forname:['sub_task_count','WAITING'],align:'center',scopedSlots: {customRender:'cycles'},
            "formatter":function(obj,name){
              return obj[name]
            },colorEvent:(row)=>{
              if( row.sub_task_count.WAITING > 0) return `color:${ this.$global.colorStatus['orange'] }`
            },width:100
          },
          { title:'创建时间',dataIndex:'created_at',align:'center',width:200 },
          { title:'更新时间',dataIndex:'updated_at',align:'center',width:200 },
          {
            title: '操作',align:'center',fixed:'right',width:150,
            scopedSlots: {customRender: 'action'},
            tableBtn:[
              { title:'详情',type:'primary',btnType:'handleDetails',size:'small' },
              // { title:'开启',type:'primary',btnType:'handleOpen',size:'small',bgColor:this.$global.colorStatus['green'] },
              // {
              //   title:'关闭',type:'danger',btnType:'handleClose',size:'small',
              //   popconfirm:true,popconfirmTitle:'是否关闭计划？关闭后可重新开启'
              // },
            ]
          },
        ]
      },
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 初始化数据
    getList(){
      taskList(this.queryParam).then((res)=>{
        if(res.code === 'SUCCESS'){
          this.tableData.tableDataSource = res.data.list
          this.total = res.data.page_info.total
        }
      })
    },
    // table表内列按钮
    async tableHandleIn(tableFnc,row){
      let res
      if( tableFnc === 'handleDetails' ) return ( this.tack_details = row,this.is_drawer = true )
      // if ( tableFnc === 'handleOpen' && row.task_status !== 'DONE' ) res = await taskOpen(row.id)
      // if ( tableFnc === 'handleClose' && row.task_status !== 'CLOSE' ) res = await taskClose(row.id)
      // if( typeof res === 'undefined' ) return this.$Tip('请正确使用按钮')

      // this.$Tip(res)
      // if( res.code === 'SUCCESS' ) this.getList()
    }, 
    // 搜索
    handleFilter(){
      this.queryParam.page = 1
      this.getList()
    },
    // 关闭抽屉
    drawerClose(){
      this.is_drawer = false
    },
  }
}
</script>
